<template>
	<view class="settings-page">
		<!-- 设置内容区域 -->
		<view class="settings-content">
			<!-- 循环渲染模块组 -->
			<view 
				v-for="(moduleGroup, groupIndex) in modules" 
				:key="groupIndex" 
				class="setting-module"
			>
				<view class="module-title">{{ moduleGroup.title }}</view>
				
				<!-- 动态渲染模块组内的设置项 -->
				<view 
					v-for="(item, itemIndex) in moduleGroup.list" 
					:key="itemIndex" 
					class="setting-item" 
					:class="{ 'disabled': item.disabled }"
					@click="handleModuleClick(item)"
				>
					<text class="setting-item-text">{{ item.name }}</text>
					<view class="setting-item-arrow">
						<text class="iconfont icon-arrow-right">></text>
					</view>
				</view>
			
			</view>
			<view>
				<view class="module-title">功能</view>
				<view class="setting-item">
					<view class="setting-item-text">
						<u-button @click="handleLogoutClick" type="error">退出登录</u-button>
					</view>
				</view>
			</view>
		</view>
	</view>


	<u-modal @confirm="handleLogoutConfirm" :show-cancel-button="true" :mask-close-able="true" v-model="handleLogout_model" >
		<view style="display: flex; align-items: center; justify-content: center; padding: 20rpx;">
			<u-text  text="是否清空全部内容?"></u-text>
			<u-switch v-model="handleLogout_model_switch_checked"></u-switch>
		</view>
	</u-modal>
</template>

<script setup>
import { ref } from 'vue'

const handleLogout_model = ref(false)
const handleLogout_model_switch_checked = ref(false)

// 模块管理数据结构，包含多个设置组
const modules = ref([
	{
		"title": "其它页",
		"list": [
			{
				"name": "查看版本",
				"disabled": false,
				"link": "/pages/version/version"
			},
			{
				"name": "话题库",
				"disabled": false,
				"link": "/pages/script/script"
			},
			{
				"name": "配置项",
				"disabled": false,
				"link": "/pages/config/config"
			},
			{
				"name": "反馈",
				"disabled": false,
				"link": "/pages/feedback/feedback"
			}
			// 可添加更多系统设置项
		]
	}
])


// 退出登录点击事件处理
const handleLogoutClick = () => {
	handleLogout_model.value = true
	
}
function handleLogoutConfirm() {
	if(handleLogout_model_switch_checked.value) {
		console.log("清空全部内容");
		uni.clearStorageSync()
	}else {
		console.log("仅退出登录");
		uni.removeStorageSync("userInfo")
	}
	handleLogout_model.value = false
uni.showToast({
			title: '操作成功',
			icon: 'none',
			duration: 1500
		})
	setTimeout(() => {
		uni.reLaunch({ url: "/pages/login/login" })
	}, 500)
}

// 禁用模块点击提示
const showDisablePrompt = () => {
	uni.showToast({
		title: '维护中，入口暂时关闭',
		icon: 'none',
		duration: 1500
	})
}

// 模块点击事件处理
const handleModuleClick = (item) => {
	if (item.disabled) {
		showDisablePrompt()
		return
	}
	uni.navigateTo({ url: item.link })
}
</script>

<style scoped lang="scss">
.settings-page {
	min-height: 100vh;
	background-color: #f5f5f5;
}





.settings-content {
	padding: 20rpx;
}

.setting-module {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
}

.module-title {
	padding: 20rpx 30rpx;
	font-size: 28rpx;
	color: #999;
	background-color: #fafafa;
}

.setting-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #f5f5f5;

	&:last-child {
		border-bottom: none;
	}
}

.setting-item-text {
	font-size: 32rpx;
	color: #333;
}

.setting-item-arrow {
	color: #ccc;
}



/* 禁用模块样式 */
.setting-item.disabled {
	opacity: 0.6;
	pointer-events: auto; /* 允许点击触发提示 */
}
</style>
